* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
  background: #ffffff;
  color: #000000;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
#header {
  padding: 1rem;
  text-align: center;
}
/* 主容器 */
.box {
  flex: 1;/* 弹性盒模型，使容器占据剩余空间 */
  padding: 20px;
  display: grid;/* 使用网格布局 */
  grid-template-columns: 1fr 1fr; /* 左右比例 1:1 */
  grid-template-rows: auto 1fr; /* 定义两行，第一行高度自适应，第二行占据剩余空间 */
  gap: 20px; /* 网格项之间的间隙为20px */
  max-width: 3840px; /* 8K适配 */
  margin: 0 auto; /* 水平居中 */
  width: 100%;
}
/* 左侧容器 */
.left-box {
  display: grid;
  grid-template-rows: repeat(2, 1fr);/* 定义两行，高度均分 */
  gap: 20px;
  height: calc(100vh - 160px);/* 高度为视口高度的100%减去160px，实现动态高度 */
}

/* 中间地图容器 */
.center-box {
  position: relative;/* 相对定位 */
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  overflow: hidden;/* 溢出内容隐藏 */
  height: calc(100vh - 160px);
}
/* 底部容器 */
.bottom-box {
  grid-column: 1 / -1; /* 跨全部列 */
  display: grid;
  grid-template-columns: 1fr 1fr;/* 定义两列，宽度比例为1:1 */
  gap: 20px;
  height: 300px; /* 固定底部高度 */
}

/* 通用图表样式 */
.grid-item {
  border-radius: 8px;
  box-shadow: 0 2px 10px black;
  padding: 15px;
  transition: all 0.3s;/* 所有属性变化过渡效果为0.3秒 */
}

/* 饼图特殊样式 */
.pie {
  min-height: 200px;
  backdrop-filter: blur(5px);/* 背景模糊效果为5px */
}
/* 地图容器特殊样式 */
.chinamap {
  height: 100%;
  width: 100%;
}
/* 底部子容器 */
.l-box, .r-box {
  display: grid;
  gap: 20px;
}
.l-box {
  grid-template-rows: 1fr;
}

.r-box {
  grid-template-rows: 1fr;
}